<template>
    <div>
        <el-dialog
        title="修改文章"
        :visible="showDialog"
        width="50%"
        @close="cancelBtn">

        <el-form label-width="120px">
            <el-form-item label="文章标题">
                <el-input v-model="alterList.title"></el-input>
            </el-form-item>
            <el-form-item label="文章内容">
                <div>
                    <quill-editor
                        v-model="alterList.articleBody"
                    ></quill-editor>
                </div>
            </el-form-item>
            <el-form-item label="视频地址">
                <el-input v-model="alterList.videoURL"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer" >
            <el-button @click="cancelBtn">取 消</el-button>
            <el-button type="primary" @click="isOKBtn">确 定</el-button>
        </span>
        </el-dialog>

    </div>
</template>

<script>
// import 'highlight.js/styles/xcode.css'
import { update } from '../../api/hmmm/articles'
export default {
  props: {
    showDialog: {
      type: Boolean
    },
    alterList: {
      type: Object
    }
  },
  data () {
    return {

    }
  },
  methods: {
    // 取消
    cancelBtn () {
      this.$emit('update:showDialog', false)
      this.$emit('update:alterList', {})
    },
    // 确定
    async  isOKBtn () {
      update(this.alterList)
      this.$emit('update:showDialog', false)
      this.$parent.list()
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
    display: flex;
    justify-content: flex-end;
}
</style>
